<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div,p,span{background-color: red;height: 50px;width: 200px;display: inline;}
  div{height: auto;display: inline;}
  span{width: 200px;height: 200px;}
  img{width: 100px;height: 100px;}
</style>
<body>  
  <!--
    网页中的盒子模型很重要的概念：
    盒子模型用来“放”网页中的各种元素
    网页设计中的内容，如文字，图片等元素，都可以是盒子（div嵌套）
    网页中盒子模型 
    宽度属性：宽度：width：长度|百分比|auto
    哪些HTML元素可设置高和宽的属性
    块级元素<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dd> <dt> 
    替换元素<img> <input> <textarea>
    
  -->
  <div>盒子占一行</div>
  <p>盒子块级占一行</p>
  <img src="../../HTML/asset/1.jpg"  alt="">
  <span>行内元素内容默认</span>
  <p>第一标签
    <span>我是span的标签</span>
  </p>
  <span>我是span的标签</span>
</body>
</html>